<template>
<view>
<!--index.wxml-->
<!--<import src="../webview/contact.wxml"></import>-->
<!-- <template is="inContact" data="{{showtk}}" /> -->

<view>
  <view v-if="showloading">
    <image src="http://imgbdb3.bendibao.com/xcx/202011/13/20201113154336_91271.png" mode="widthFix" style="width: 100%;"></image>
  </view>
  <view class="body" v-else>
    <!-- 城市及搜索框 -->
    <view class="top-box">
      <view class="content">
        <navigator class="city flex-row" url="/pages/city/city?pagetype=bsy" hover-class="none">
          <text>{{city}}</text>
          <image src="/static/images/dwicon.png" mode></image>
        </navigator>
        <scroll-view scroll-x="true" class="scoll-x">
          <block>
            <view class="channel">
              <navigator v-for="(item, index) in bsylistData" :key="index" class="items" :url="'/pages/article/list/list?id=' + item.id + '&type=' + item.pagetype + '&city=' + citycode + '&menuIndex=' + index" hover-class="none">
                <text>{{item.classname}}</text>
              </navigator>
            </view>
          </block>
        </scroll-view>
        <navigator class="search" url="/pages/search/search" hover-class="none">
          <image src="/static/images/index/sousuo.png" mode></image>
        </navigator>
      </view>
    </view>


    <view style="padding-top:50rpx;">
      <!-- 轮播图 -->
      <view class="swiper-box" v-if="bannerArray!=''">
        <swiper class="swiper" indicator-dots="true" autoplay="true" indicator-color="#8a6e6a" indicator-active-color="#ded6bc" circular="true">
          <swiper-item v-for="(item, index) in bannerArray" :key="index" @tap="bannerClick" :data-path="item.path" :data-appid="item.appid" :data-title="item.title">
            <view class="swiper_list">
              <image :src="item.pic"></image>
              <view class="imgtext">{{item.title}}</view>
            </view>
          </swiper-item>
        </swiper>
      </view>
      <!-- <view class="swiper-box">
        <swiper class="swiper" indicator-dots="true" autoplay="true" indicator-color="#8a6e6a" indicator-active-color="#ded6bc" circular="true">
          <swiper-item wx:for="{{3}}" wx:key="index">
            <view class="swiper_list">
              <image src="http://imgbdb3.bendibao.com/szbdb/pic/20206/9/20200609133210_78373.jpg"></image>
              <view class="imgtext">核酸检测</view>
            </view>
          </swiper-item>
        </swiper>
      </view> -->

      <view class="zx-box" v-if="hotList!=''">
        <view v-for="(item, index) in hotList" :key="index" class="zx-item">
          <navigator class="items" :url="'/pages/article/detail/detail?id=' + item.id + '&type=' + item.pagetype + '&city=' + citycode" hover-class="none">
            <view class="title-box">
              <view class="title">{{item.title}}</view>
              <view class="time">{{item.publictime}}</view>
            </view>
            <image :src="item.images" mode="aspectFill" v-if="item.images"></image>
          </navigator>
        </view>
      </view>

      <view v-for="(bsy, index) in bsylistData" :key="index" class="article-box">
        <view class="pd-title">
          <view class="flex-row">
            <image src="/static/images/dbline.png" mode style="width: 16rpx;height: 28rpx;margin-right: 11rpx;"></image>
            <view class="pd">{{bsy.classname}}</view>
          </view>

          <view class="flex-row">
            <view v-for="(item, index2) in bsy.classlist" :key="index2" class="lanmu">
              <navigator hover-class="none" :url="'/pages/article/lanmu/lanmu?id=' + item.id + '&type=' + item.pagetype + '&city=' + citycode">{{item.classname}}</navigator>
            </view>
          </view>
        </view>
        <view v-for="(item, index2) in bsy.infolist" :key="index2" class="pd-item">
          <navigator class="items" :url="'/pages/article/detail/detail?id=' + item.id + '&type=' + item.pagetype + '&city=' + citycode" hover-class="none">
            <view class="title-box">
              <view class="title">{{item.title}}</view>
              <view class="time">{{item.publictime}}</view>
            </view>
            <image :src="item.images" mode="aspectFill" v-if="item.images"></image>
          </navigator>
        </view>
        <navigator class="see-more" :url="'/pages/article/list/list?id=' + bsy.id + '&type=' + bsy.pagetype + '&city=' + citycode + '&menuIndex=' + index" hover-class="none">
          <view>查看更多</view>
        </navigator>
      </view>
    </view>
    <view class="app-bottom" style="background-color: #f6f5f8;">
      <image src="/static/images/logo.png" mode></image>
    </view>
  </view>
</view>
</view>
</template>

<script>
//index.js
//获取应用实例
const app = getApp();
const util = require("../../utils/util.js");
var QQMapWX = require("../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js");
var qqmapsdk = new QQMapWX({
  key: 'KR7BZ-XSQ3P-VGFD7-LNRZL-E7PXE-STF76'
});

export default {
  data() {
    return {
      menuIndex: 0,
      menuName: '政务办事',
      showOld: false,
      showNew: false,
      // cityname: app.extConfig.cityname,
      // citycode: app.extConfig.citycode,
      showtk: false,
      path: '',
      city: "深圳",
      citycode: 'sz',
      item: {
        showtk: false,
        path: ''
      },
      bsylistData: [],
      hotztData: [],
      // 热门办事
      bsPeopleData: [],
      //办事人群
      // allData:["政务办事","教育办事","交通出行","车辆服务","民生服务"],
      allData: [{
        name: "政务办事",
        info: []
      }, {
        name: "教育办事",
        info: []
      }, {
        name: "交通出行",
        info: []
      }, {
        name: "车辆服务",
        info: []
      }, {
        name: "民生服务",
        info: []
      }],
      showloading: true,
      bannerArray: [],
      hotList: [],
      linkname: ""
    };
  },

  components: {},
  props: {},
  onLoad: function (opt) {
    this.setData({
      citycode: opt.city ? opt.city : uni.getStorageSync("citycode") ? uni.getStorageSync("citycode") : this.citycode
    });
    uni.setStorageSync('citycode', this.citycode);
    util.getUrl(app.globalData.url).then(res => {
      util.cityList().then(res => {
        let allcity = res.allcity;

        if (!uni.getStorageSync("city") && !opt.city) {
          qqmapsdk.reverseGeocoder({
            success: res => {
              let city = res.result.address_component.city;
              let citydata = allcity.filter(v => {
                if (city != undefined) {
                  if (city.indexOf(v.cityname) != -1) {
                    return v;
                  }
                }
              });

              if (city.indexOf(uni.getStorageSync("city")) == -1) {
                if (citydata[0]) {
                  let citycode = citydata[0] ? citydata[0].citycode : '';
                  uni.showModal({
                    title: '温馨提醒',
                    content: '当前城市与您定位城市不一样，是否切换城市？',
                    success: res => {
                      if (res.confirm) {
                        uni.reLaunch({
                          url: '/pages/bsy/bsy?city=' + citycode
                        });
                      }
                    }
                  });
                } else {
                  return;
                }
              }
            }
          });
        }

        let citydatas;
        if (Array.isArray(allcity) && allcity) citydatas = allcity.filter(v => v.citycode == this.citycode);
        this.setData({
          city: citydatas[0] ? citydatas[0].cityname : this.city
        });
        uni.setStorageSync('city', this.city);
        this.setData({
          showloading: true
        });
        this.getBannerData();
        this.getbsylist();
        this.getHotList();
      }); // this.getCityConfig();
    });
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: "本地宝-办事攻略",
      imageUrl: "http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161843_68677.jpg"
    };
  },
  onShareTimeline: function () {
    return {
      title: "本地宝",
      imageUrl: "http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161843_68677.jpg"
    };
  },
  methods: {
    // 首页swiper-banner
    getBannerData() {
      let bannerData = {
        action: 'lunbo',
        city: uni.getStorageSync("city"),
        block: "办事攻略",
        blockvalue: "",
        version: app.globalData.version
      };
      util.request('service.php', bannerData).then(res => {
        this.setData({
          bannerArray: res.data.data
        });
      });
    },

    // 办事频道
    getbsylist() {
      let data = {
        citycode: this.citycode == "sz" ? "bsy" : this.citycode,
        action: "sitelist",
        pagesize: 4,
        bsy: 1,
        version: app.globalData.version
      };
      util.request('index.php', data, 'GET').then(res => {
        this.setData({
          bsylistData: res.data
        });
        this.setData({
          showloading: false
        });
      });
    },

    // 热点
    getHotList() {
      let hotData = {
        action: "index",
        city: uni.getStorageSync("city"),
        citycode: uni.getStorageSync("citycode"),
        version: app.globalData.version
      };
      util.request('service.php', hotData).then(res => {
        if (res.data.data) this.setData({
          hotList: res.data.data.hot
        });
        this.setData({
          showloading: false
        });
      });
    },

    // banner点击事件
    bannerClick(e) {
      let path = e.currentTarget.dataset.path;
      let linkname = e.currentTarget.dataset.title;
      let appid = e.currentTarget.dataset.appid;

      if (path.indexOf("pages") == -1 && path.indexOf("mp.weixin.qq.com") == -1) {
        this.setData({
          showtk: true
        });
        util.navContact(linkname, path);
      } else {
        util.navMethod(path, appid);
      }
    },

    // 栏目点击事件
    lanmuTap(e) {
      let id = e.currentTarget.dataset.id;
      let type = e.currentTarget.dataset.type; // let name = e.currentTarget.dataset.name;

      uni.navigateTo({
        url: '../article/list/list?id=' + id + '&type=' + type + '&city=' + this.citycode
      });
    },

    // 工具、服务点击事件
    servBtn(e) {
      let path = e.currentTarget.dataset.path;
      let appid = e.currentTarget.dataset.appid;
      let linkname = e.currentTarget.dataset.title;
      this.item.path = path;
      this.setData({
        path,
        linkname // item,

      });

      if (path.indexOf("pages") == -1 && path.indexOf("mp.weixin.qq.com") == -1) {
        util.navContact(linkname, path);
        this.setData({
          showtk: true
        });
      } else {
        util.navMethod(path, appid);
      }
    },

    // 热门专题、全部办事事件
    bsyClickBtn(e) {
      let path = e.currentTarget.dataset.path;
      let appid = e.currentTarget.dataset.appid;
      let title = e.currentTarget.dataset.title;

      if (path.indexOf("pages") == -1 && path.indexOf("mp.weixin.qq.com") == -1) {
        util.navContact(title, path);
        this.setData({
          showtk: true
        });
      } else {
        util.navMethod(path, appid);
      }
    },

    // 进入客服会话
    contact() {
      this.setData({
        showtk: false
      });
      let replay = {
        action: "reply",
        title: this.linkname,
        url: this.path,
        openid: uni.getStorageSync("openid")
      };
      util.request('user.php', replay, 'POST');
    },

    // 关闭
    close() {
      this.setData({
        showtk: false
      });
    },

    // 全部
    clickMenu: function (e) {
      let menuIndex = e.currentTarget.dataset.index;
      let menuName = e.currentTarget.dataset.name;
      this.setData({
        menuIndex,
        menuName
      });
      this.getallBsy(menuName, menuIndex);
    }
  }
};
</script>
<style>
/**index.wxss**/

page {
  /* background-color: #f6f5f8; */
  height: 100%;
}

.body {
  /* margin-top: 10rpx; */
}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.top-box {
  background-color: #fff;
  position: fixed;
  top: 0;/*  #ifdef  H5  */
  top: calc(88rpx + constant(safe-area-inset-top));
  top: calc(88rpx + env(safe-area-inset-top));/*  #endif  */
  z-index: 999999;
  width: 100%;
}

.top-box .content {
  padding: 0 40rpx 15rpx 40rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.city text {
  font-size: 28rpx;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  text-align: center;
  color: #242424;
  margin-right: 6rpx;
  white-space: nowrap;
}

.city image {
  width: 22rpx;
  height: 16rpx;
}

.scoll-x {
  white-space: nowrap;
  width: 75%;
  padding: 0 10rpx;
  text-align: center;
}

.channel {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.channel .items {
  font-size: 28rpx;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  text-align: center;
  color: #b5b5b5;
  white-space: nowrap;
  margin-right: 20rpx;
}

.channel .items:last-child {
  margin-right: 0;
}

.search image {
  width: 38rpx;
  height: 38rpx;
}

.swiper-box {
  margin: 24rpx 40rpx 0 40rpx;
}

.swiper {
  height: 285rpx;
}

.swiper_list {
  position: relative;
  height: 285rpx;
}

.swiper_list image {
  height: 100%;
  width: 100%;
  border-radius: 20rpx;
}

.imgtext {
  background: rgba(0, 0, 0, 0.41);
  padding: 10rpx 20rpx;
  width: 94.5%;
  font-size: 28rpx;
  color: #fff;
  position: absolute;
  bottom: 0;
  border-radius: 0rpx 0rpx 20rpx 20rpx;
}

.wx-swiper-dots {
  position: relative;
  left: unset !important;
  right: 0;
}

.wx-swiper-dots.wx-swiper-dots-horizontal {
  margin-bottom: 0rpx;
}

/* 热点 */

.zx-box {
  padding: 0rpx 40rpx;
  border-bottom: 15rpx solid #f5f5f5;
  background-color: #fff;
}

.zx-item {
  margin-top: 32rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.zx-item:last-child {
  border: 0;
}

.zx-item .items {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20rpx;
}

.zx-item .items image {
  width: 188rpx;
  height: 144rpx;
  flex-shrink: 0;
  border-radius: 12rpx;
}

.title-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-right: 20rpx;
}

.title-box .title {
  font-size: 30rpx;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 700;
  text-align: left;
  color: #333;
  line-height: 40rpx;
}

.title-box .time {
  font-size: 22rpx;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  text-align: left;
  color: #989696;
  margin-top: 20rpx;
}

.article-box {
  padding: 30rpx 40rpx 0 40rpx;
  border-bottom: 15rpx solid #f5f5f5;
  background-color: #fff;
}

.pd-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.pd {
  font-size: 32rpx;
  font-family: PingFang SC, PingFang SC-Semibold;
  font-weight: bolder;
  color: #242424;
}

.lanmu {
  white-space: nowrap;
  font-size: 26rpx;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  color: #939393;
  border-right: 2rpx solid #939393;
  padding: 0 9px;
}

.lanmu:last-child {
  padding-right: 0;
  border: 0;
}

.pd-item {
  margin-top: 16px;
}

.pd-item .items {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 10px;
}

.pd-item .items  image {
  width: 198rpx;
  height: 144rpx;
  flex-shrink: 0;
  border-radius: 12rpx;
}

.pd-item .items  .title-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-right: 20rpx;
}

.pd-item .items  .title-box   .title {
  font-size: 30rpx;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  text-align: left;
  color: #333;
  line-height: 40rpx;
}

.pd-item .items  .title-box   .time {
  font-size: 22rpx;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  text-align: left;
  color: #989696;
  margin-top: 20rpx;
}

.see-more {
  padding: 32rpx 0;
  font-size: 24rpx;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  text-align: center;
  color: #f60;
  line-height: 32rpx;
}
/* 收藏小程序的提示 */

.cue-box {
  position: fixed;
  top: 0rpx;/*  #ifdef  H5  */
  top: calc(88rpx + constant(safe-area-inset-top));
  top: calc(88rpx + env(safe-area-inset-top));/*  #endif  */
  right: 88rpx;
}

.cue-box image {
  width: 554rpx;
  height: 83rpx;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
</style>